﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>产品列表</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="/style/admin/style/adminStyle.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/style/admin/js/jquery-2.1.4.min.js" ></script>
    </head>
    <body>
        <div class="wrap">
            <div class="page-title">
                <span class="modular fl"><i class="add"></i><em>编辑/添加产品</em></span>
                <span class="modular fr"><a href="/admin/types" class="pt-link-btn">产品列表</a></span>
            </div>
            <form id="formAdd"  action="/admin/types" method="POST" enctype="multipart/form-data">
                {{ csrf_field() }}
                <table class="list-style">
                    <tr>
                        <td style="text-align:right;width:15%;">产品名称：</td>
                        <td><input type="text" name="title" class="textBox length-long"/></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">产品分类：</td>
                        <td>
                            <select name="cid" class="textBox">
                                @foreach($data as $value)
                                <?php
                                $arr = explode(",", $value->path);
                                $tot = count($arr);
                                ?>
                                <option value="{{$value->id}}">{{str_repeat("|==",$tot-2)}}{{$value->name}}</option>  
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">市场价：</td>
                        <td>
                            <input type="text" name="m_price" class="textBox length-short"/>
                            <span>元</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">会员价：</td>
                        <td>
                            <input type="text" name="price" class="textBox length-short"/>
                            <span>元</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">库存：</td>
                        <td>
                            <input type="text" name="num" class="textBox length-short"/>
                            <span>盘</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">产品关键词：</td>
                        <td><input type="text" name="keywords" class="textBox length-long"/></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">产品描述：</td>
                        <td><input type="text" name="info" class="textBox length-long"/></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">推荐至：</td>
                        <td>
                            <input type="checkbox" name="is_best" value="1" checked id="jingpin"/>
                            <label for="jingpin">精品</label>
                            <input type="checkbox" name="is_news" value="1" checked  id="xinpin"/>
                            <label for="xinpin">新品</label>
                            <input type="checkbox" name="is_host" value="1" checked id="rexiao"/>
                            <label for="rexiao">热销</label>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align:right;">产品主图片：</td>
                        <td>
                            <input type="file" accept="image/*" id="up_img" name="photo"  onchange="fileUpLoad(this);" class="hide"/>
                            <label for="up_img" class="labelBtnAdd">+</label>
                            <div id="showImg">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align:right;">产品子图：</td>
                        <td>
                            <input type="file" name="subgraph[]"  multiple="multiple" id="up_imgs" onchange="fileUpLoads(this);" class="hide"/>
                            <label for="up_imgs" class="labelBtn2">本地上传(最多选择N张)</label>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;"></td>
                        <td>
                            <div id="showImgs">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align:right;">产品详情：</td>
                        <td><textarea class="textarea" name="text">我这是是产品的详细介绍</textarea></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;"></td>
                        <td><input type="submit" value="发布新商品" class="tdBtn"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
    <script type="text/javascript">
        //主图上传容器
        var imgCont = document.getElementById("showImg");
        var ipt = document.getElementById("up_img");
        //子图上传容器
        var imgConts = document.getElementById("showImgs");
        var ipts = document.getElementById("up_imgs");
        function fileUpLoad(_this) {//主图上传方法
            var file = _this.files[0];
            if (!FileReader) {
                alert("你的浏览器不支持H5的FileReader");
                ipt.setAttribute("disabled", "disabled");//浏览器不支持禁用input type='file'文件上传标签  
                return;
            }
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);//将文件读取为Data URL 读取结果放在result中  
            fileReader.onload = function (e) {
                var img = '<img src="' + this.result + '"/ width=60 height=60>';
                imgCont.innerHTML = img;
                console.log(this.result);
            }
        }

        function fileUpLoads(_this) {//子图上传方法
            if (!FileReader) {
                alert("你的浏览器不支持H5的FileReader");
                ipts.setAttribute("disabled", "disabled");//浏览器不支持禁用input type='file'文件上传标签  
                return;
            }
            for (i = 0; i < _this.files.length; i++) {
                var reader = new FileReader();
                reader.readAsDataURL(_this.files[i]);
                reader.onload = function (e) {
                    //多图预览 
                    if ($("#showImgs").children().length < 5) {
                        var img1 = '<img src="' + this.result + '"/ width=60 height=60>';
                        imgConts.innerHTML += img1;
                    } else {
                        alert('最多5张图片');
                    }
                }
            }
        }

    </script>

</html>